<template>
  <HeaderNavTabarVue   :title="'施工详情'" />
  <view
    class="installUpload"
    :style="'min-height: ' + boxHeight + 'rpx;'"
    v-for="(item, index) in detailList"
    :key="index"
  >
    <view class="info-list">
      <view class="info-item">
        <view class="info-item-bu">
          <view class="info-list-item">
            <text>单据编号:</text>
            <text>{{ item.orderId }}</text>
          </view>
          <view class="info-list-item">
            <text>客户名称:</text>
            <text>{{ item.customerName }}</text>
          </view>
        </view>
        <view :class="item.status">{{ item.status }}</view>
      </view>
      <view class="info-list-item">
        <text>终端门店:</text>
        <text>{{ item?.customerStore }}</text>
      </view>
      <view class="info-list-item">
        <text>派单日期:</text>
        <text>{{ item?.dispatchDate }}</text>
      </view>
      <view class="info-list-item">
        <text>要求完工日期:</text>
        <text>{{ item?.completionIsRequiredDate }}</text>
      </view>
    </view>
    <view class="modle-image">
      <view class="materialImage-title">
        <h4>模型照片</h4>
      </view>
      <view class="image-grid-list">
        <image
          @tap="previewImageFn([item2], index)"
          :src="item2"
          v-for="(item2, index) in JSON.parse(item.photosModel)"
          style="width: 202rpx; height: 202rpx"
        />
      </view>
    </view>
    <view v-for="(item2, i) in [item.process]" :key="i" v-if="item.status !== '未接单'">
      <view class="modle-image">
        <view class="materialImage-title">
          <h4>施工照片</h4>
        </view>
        <view class="image-grid-list">
          <image
            v-if="JSON.parse(item2.scenePhotos).length > 0"
            :src="item3"
            @tap="previewImageFn(JSON.parse(item2.scenePhotos), index)"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.scenePhotos)"
            :key="index"
          />

          <image
            @tap="previewImageFn(JSON.parse(item2.skeletonPhotos), index)"
            v-if="JSON.parse(item2.dismantledPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.skeletonPhotos)"
            :key="index"
          />

          <image
            @tap="previewImageFn(JSON.parse(item2.skeletonPhotos), index)"
            v-if="JSON.parse(item2.skeletonPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.skeletonPhotos)"
            :key="index"
          />

          <image
            @tap="previewImageFn(JSON.parse(item2.installedPhotos), index)"
            v-if="JSON.parse(item2.installedPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.installedPhotos)"
            :key="index"
          />
          <image
            @tap="previewImageFn(JSON.parse(item2.illuminatedPhotos), index)"
            v-if="JSON.parse(item2.illuminatedPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.illuminatedPhotos)"
            :key="index"
          />
          <image
            @tap="previewImageFn(JSON.parse(item2.waterproofPhotos), index)"
            v-if="JSON.parse(item2.waterproofPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.waterproofPhotos)"
            :key="index"
          />
          <image
            @tap="previewImageFn(JSON.parse(item2.servceCardPhotos), index)"
            v-if="JSON.parse(item2.servceCardPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.servceCardPhotos)"
            :key="index"
          />
          <image
            @tap="previewImageFn(JSON.parse(item2.overhaulPhotos), index)"
            v-if="JSON.parse(item2.overhaulPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.overhaulPhotos)"
            :key="index"
          />
          <image
            @tap="previewImageFn(item2.deliveryOrderPhotos, index)"
            v-if="JSON.parse(item2.deliveryOrderPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.deliveryOrderPhotos)"
            :key="index"
          />
        </view>
      </view>

      <view class="modle-image">
        <view class="materialImage-title">
          <h4>工费单照片</h4>
        </view>
        <view class="image-grid-list">
          <image
            @tap="previewImageFn(item2.payBills, index)"
            v-if="JSON.parse(item2.payBills).length > 0"
            :src="item"
            style="width: 202rpx; height: 202rpx"
            v-for="(item, index) in JSON.parse(item2.payBills)"
            :key="index"
          />
        </view>
      </view>
      <view class="modle-image">
        <view class="materialImage-title">
          <h4>待验收照片</h4>
        </view>
        <view class="image-grid-list">
          <image
            @tap="previewImageFn(JSON.parse(item2.acceptancePhotos), index)"
            v-if="JSON.parse(item2.acceptancePhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.acceptancePhotos)"
            :key="index"
          />
        </view>
        <view class="image-grid-list">
          <image
            @tap="previewImageFn(JSON.parse(item2.acceptanceFormPhotos), index)"
            v-if="JSON.parse(item2.acceptanceFormPhotos).length > 0"
            :src="item3"
            style="width: 202rpx; height: 202rpx"
            v-for="(item3, index) in JSON.parse(item2.acceptanceFormPhotos)"
            :key="index"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { getTitleBarHeight } from '@/utils/system.js'
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import {
  getProcessVOByIdApi,
  updateAcceptanceApi,
  updatePayBillsApi,
  updateProcessApi,
} from '@/api/customer'
import config from '@/config'

const detailList = ref(null)
const getProcessVOByIdApiFn = async (id) => {
  let params = {
    id: String(id),
  }
  let { code, data } = await getProcessVOByIdApi(params)
  if (code === 200) {
    detailList.value = [data]
  }
}
const previewImageFn = (arrImage, index) => {
  if (typeof arrImage === 'string') {
    uni.previewImage({
      current: index,
      urls: JSON.parse(arrImage),
    })
  } else {
    uni.previewImage({
      current: index,
      urls: arrImage,
    })
  }
}
onLoad((v) => {
  getProcessVOByIdApiFn(v.id)
})
</script>

<style lang="scss" scoped>
@import '/static/style/index.scss';

.待接单 {
  color: #165dff;
  background-color: #e8f3ff;
}

.已完成 {
  color: #00b42a;
  background-color: #e8ffea;
}

.待验收,
.施工中,
.上传工费 {
  color: #ff7d00 !important;
  background-color: #fff7e8;
  padding: 5rpx;
}

.已拒接 {
  color: $btn-error-color;
  background-color: $btn-error-bg;
}

.installUpload {
  padding: 40rpx 32rpx;

  .info-list {
    background-color: #fff;
    border-radius: 16rpx;
    border: 1rpx solid #e5e6eb;
    padding: 24rpx 32rpx;
    color: #86909c;
    font-size: 24rpx;

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 33.6rpx;
    }
  }

  .modle-image {
    border-radius: 16rpx;
    border: 1rpx solid #e5e6eb;
    background-color: #fff;
    padding: 24rpx 32rpx;
    margin-top: 16rpx;
  }

  .image-grid-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
